<template>
  <el-row class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" ref="trucksearchform" @keyup.enter.native="getDatatruckList()">
        <el-row>
          <el-form-item class="el-col-7" prop="truckTypeId" label="车辆类型">
            <el-select v-model="dataForm.truckTypeId" placeholder="车辆类型">
              <el-option label="请选择" value="0" aria-selected="true" ></el-option>
              <el-option
                v-for="item in ttypelist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="el-col-7" prop="licensePlate" label="车牌号">
            <el-input v-model="dataForm.licensePlate" placeholder="车牌号" clearable></el-input>
          </el-form-item>
          <el-form-item class="el-col-7" prop="fleetId" label="车队名称">
            <el-select v-model="dataForm.fleetId" placeholder="车队名称">
              <el-option label="请选择" value="0" aria-selected="true" ></el-option>
              <el-option
                v-for="item in tfleetlist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button class="el-button--primary" @click="getDatatruckList()">查询</el-button>
            <el-button class="el-button--warning" @click="truckresetdateform('trucksearchform')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-row>
        <el-button class="el-button--success " @click="addtruckVisible = true">+新增车辆</el-button>
      </el-row><br>
      <el-table
        :data="datatruckList"
        border
        v-loading="datatruckListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="车辆编号">
        </el-table-column>
        <el-table-column
          prop="truckTypename"
          header-align="center"
          align="center"
          label="车辆类型">
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          header-align="center"
          align="center"
          label="车牌号">
        </el-table-column>
        <el-table-column
          prop="fleetname"
          header-align="center"
          align="center"
          label="所属车队">
        </el-table-column>
<!--        <el-table-column
          prop="deviceGpsId"
          header-align="center"
          align="center"
          label="GPS设备ID">
        </el-table-column>-->
        <el-table-column
          prop="allowableLoad"
          header-align="center"
          align="center"
          label="准载重量（千克）">
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          header-align="center"
          align="center"
          label="准载体积（方）">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="过期状态">
        </el-table-column>
        <el-table-column
          prop="tripsid"
          header-align="center"
          align="center"
          width="300"
          label="车次编号">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="gettruckdetailsbyid(scope.row.id)">查看详情</el-button>&nbsp;
            <el-button type="text" size="small" @click="deletetruck(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>


    <el-dialog custom-class="addtruckwidth" title="新增车辆" :visible.sync="addtruckVisible" :close-on-click-modal="false">
      <el-tabs type="border-card">
        <el-form ref="addtruckform" label-width="100px">
            <el-row>
              <el-form-item prop="truckTypeId" label="车辆类型">
                <el-select v-model="adddataForm.truckTypeId" placeholder="车辆类型">
                  <el-option label="请选择" value="0" aria-selected="true" ></el-option>
                  <el-option
                    v-for="item in ttypelist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
          <el-row>
              <el-form-item prop="licensePlate" label="车牌号">
                <el-input size="12px" v-model="adddataForm.licensePlate" placeholder="车牌号" clearable></el-input>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item prop="fleetId" label="所属车队">
                <el-select v-model="adddataForm.fleetId" placeholder="所属车队">
                  <el-option label="请选择" value="-1" aria-selected="true" ></el-option>
                  <el-option
                    v-for="item in tfleetlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item prop="deviceGpsId" label="GPS设备Id">
                <el-input size="12px" v-model="adddataForm.deviceGpsId" placeholder="GPS设备Id" clearable>
                </el-input>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item prop="allowableLoad" label="准载重量">
                <el-input size="12px" v-model="adddataForm.allowableLoad" placeholder="准载重量" clearable>
                  <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">千克</i>
                </el-input>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item prop="allowableVolume" label="准载体积">
                <el-input size="12px" v-model="adddataForm.allowableVolume" placeholder="准载体积" clearable>
                  <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">方</i>
                </el-input>
              </el-form-item>
          </el-row>
        </el-form>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addtruckSubmit()">保存</el-button>
        <el-button @click="addtruckVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog custom-class="truckdetailswidth" title="查看详情" :visible.sync="truckdetailsVisible" :close-on-click-modal="false">

      <el-tabs @tab-click="handleClick" :tab-position="tabPosition" type="border-card">
        <el-tab-pane label="基本信息">
          <el-card>
            <h3>车辆基本信息</h3>
            <el-form label-width="80px" id="truckform">
              <el-row>
                <el-form-item class="el-col-7" prop="id" label="车辆编号">
                  <el-input size="12px" disabled id="dtid" v-model="detailtruckdataForm.id" placeholder="车辆编号" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="licensePlate" label="车牌号">
                  <el-input size="12px" disabled id="licensePlate" v-model="detailtruckdataForm.licensePlate" placeholder="车牌号" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="agencyname" label="所属机构">
                  <el-input size="12px" disabled id="agencyname" v-model="detailtruckdataForm.agencyname" placeholder="所属机构" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="fleetId" label="所属车队">
                  <el-input size="12px" disabled id="fleetId" v-model="detailtruckdataForm.fleetId" placeholder="所属车队" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="truckName" label="车辆名称">
                  <el-input size="12px" disabled id="truckName" v-model="detailtruckdataForm.truckName" placeholder="车辆名称" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="allowableLoad" label="车辆体积">
                  <el-input size="12px" disabled id="allowableLoad" v-model="detailtruckdataForm.allowableLoad" placeholder="车辆体积" clearable>
                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">方</i>
                  </el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="allowableVolume" label="车辆载重">
                  <el-input size="12px" disabled id="allowableVolume" v-model="detailtruckdataForm.allowableVolume" placeholder="车辆载重" clearable>
                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">千克</i>
                  </el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="status" label="过期状态">
                  <el-input size="12px" disabled id="status" v-model="detailtruckdataForm.status" placeholder="过期状态" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="workstatus" label="工作状态">
                  <el-input size="12px" disabled id="workstatus" v-model="detailtruckdataForm.workstatus" placeholder="工作状态" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="fillstatus" label="装载状态">
                  <el-input size="12px" disabled id="fillstatus" v-model="detailtruckdataForm.fillstatus" placeholder="装载状态" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="deviceGpsId" label="GPSId">
                  <el-input size="12px" disabled id="deviceGpsId" v-model="detailtruckdataForm.deviceGpsId" placeholder="GPSId" clearable>
                  </el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </el-card>
          <el-row>
            <el-button @click="updatetruckbase()">编辑</el-button>
            <el-button @click="canceltruckbase()">取消</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="行驶证信息">
          <el-card>
            <h3>行驶证信息</h3>
            <el-form label-width="100px" id="lisenceform">
              <el-row>
                <el-form-item class="el-col-7" prop="id" label="行驶证号">
                  <el-input size="12px" disabled id="dlid" v-model="detaillicensedataForm.id" placeholder="行驶证号" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="engineNumber" label="发动机号码">
                  <el-input size="12px" disabled id="engineNumber" v-model="detaillicensedataForm.engineNumber" placeholder="发动机号码" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="registrationDate" label="注册时间">
                  <el-input size="12px" disabled id="registrationDate" v-model="detaillicensedataForm.registrationDate" placeholder="注册时间" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="mandatoryScrap" label="强制报废日期">
                  <el-input size="12px" disabled id="mandatoryScrap" v-model="detaillicensedataForm.mandatoryScrap" placeholder="强制报废日期" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="overallQuality" label="整备质量">
                  <el-input size="12px" disabled id="overallQuality" v-model="detaillicensedataForm.overallQuality" placeholder="整备质量" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="expirationDate" label="检验有效期">
                  <el-input size="12px" disabled id="expirationDate" v-model="detaillicensedataForm.expirationDate" placeholder="检验有效期" clearable>
                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">方</i>
                  </el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="allowableWeight" label="核定载质量">
                  <el-input size="12px" disabled id="allowableWeight" v-model="detaillicensedataForm.allowableWeight" placeholder="核定载质量" clearable>
                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">千克</i>
                  </el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="validityPeriod" label="有效期">
                  <el-input size="12px" disabled id="validityPeriod" v-model="detaillicensedataForm.validityPeriod" placeholder="有效期" clearable></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item class="el-col-7" prop="transportCertificateNumber" label="道路运输证号">
                  <el-input size="12px" disabled id="transportCertificateNumber" v-model="detaillicensedataForm.transportCertificateNumber" placeholder="道路运输证号" clearable></el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </el-card>
          <el-row>
            <el-button @click="updatelicensebase()">编辑</el-button>
            <el-button @click="cancellicensebase()">取消</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="车次信息">
          <el-card>
            <h3>车次信息</h3>
            <el-form id="tripsinfo" label-width="80px">
              <el-row>
                <el-form-item class="el-col-7" prop="tripsransportLine" label="所属线路">
                  <el-input size="12px" disabled id="tripsransportLine" v-model="detailtripsdataForm.tripsransportLine" placeholder="所属线路" clearable></el-input>
                </el-form-item>
                <el-form-item class="el-col-7 el-col-offset-1" prop="tripsname" label="所属车次">
                  <el-input size="12px" disabled id="tripsname" v-model="detailtripsdataForm.tripsname" placeholder="所属车次" clearable></el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </el-card>
        </el-tab-pane>

      </el-tabs>


      <div slot="footer" class="dialog-footer">
        <el-button @click="truckdetailsVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<style>
.addtruckwidth {
  width: 40%;
}
.truckdetailswidth{
  width: 80%;
  height: 80%;
}
</style>

<script src="src/api/work.js"></script>
<script>
import {
  addtruck, deltruckbyid,
  getdriverlist, getfleetlist, gettruckdetails, gettruckinfo,
  gettrucklist, gettrucktypelist,
} from '../../../api/base'

export default {
  data() {
    return {
      dataForm: {
        truckTypeId: '',
        licensePlate: '',
        fleetId: '',
      },
      adddataForm: {
        truckTypeId: '',
        licensePlate: '',
        fleetId: '',
        deviceGpsId: '',
        allowableLoad: '',
        allowableVolume: '',
      },
      detailtruckdataForm: {
        id: '',
        licensePlate: '',
        agencyname: '',
        fleetId: '',
        truckName: '',
        allowableLoad: '',
        allowableVolume: '',
        status: '',
        workstatus: '',
        fillstatus: '',
        deviceGpsId: '',
      },
      detaillicensedataForm: {
        id: '',
        engineNumber: '',
        registrationDate: '',
        mandatoryScrap: '',
        overallQuality: '',
        expirationDate: '',
        allowableWeight: '',
        validityPeriod: '',
        transportCertificateNumber: '',
      },
      detailtripsdataForm:{
        tripsransportLine: '',
        tripsname: '',
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: null,
      datatruckListSelections: [],
      addtruckVisible: false,
      truckdetailsVisible : false,
      datatruckList: [],
      datatruckListLoading: false,
      datadriverList: [],
      datadriverListLoading: false,
      item: {
        type: '',
        lable: ''
      },
      ttypelist: [],
      tfleetlist: [],
      tabPosition: "left",
    }
  },
  mounted() {
    this.getDatatruckList();
    this.gettrucktype();
    this.getfleet();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    truckresetdateform() {
      this.$refs['trucksearchform'].resetFields();
      this.dataForm.courierid = "请选择";
      this.getDatatruckList();
    },
    // 获取数据列表
    getDatatruckList() {
      this.datatruckListLoading = true
      let params = {
        'pageno': this.pageIndex,
        'pagesize': this.pageSize,
        'truckTypeId': this.dataForm.truckTypeId,
        'licensePlate': this.dataForm.licensePlate,
        'fleetId': this.dataForm.fleetId,
      }
      gettruckinfo(params).then(({data}) => {
          if (data && data.code == 0) {
          this.datatruckList = data.truck.rows
          this.totalPage = data.truck.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        this.datatruckListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDatatruckList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDatatruckList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.datatruckListSelections = val
    },

    addtruckSubmit() {
      addtruck(this.adddataForm).then(({data}) => {
          if (data && data.code == 0) {
            this.$message({
              message: '新增成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.addtruckVisible = false
                this.$refs['addtruckform'].resetFields()
                this.getDatatruckList()
              }
            })
          }
      })

    },
    gettruckdetailsbyid(id){
      this.truckdetailsVisible = true;
      gettruckdetails(id).then(({data}) => {
        this.detailtruckdataForm.id = data.truck.id;
        this.detailtruckdataForm.licensePlate = data.truck.licensePlate;
        this.detailtruckdataForm.agencyname = data.truck.agencyname;
        this.detailtruckdataForm.fleetId = data.truck.fleetname;
        this.detailtruckdataForm.truckName = data.truck.truckName;
        this.detailtruckdataForm.allowableLoad = data.truck.allowableLoad;
        this.detailtruckdataForm.allowableVolume = data.truck.allowableVolume;
        this.detailtruckdataForm.status = data.truck.status;
        this.detailtruckdataForm.workstatus = data.truck.workstatus;
        this.detailtruckdataForm.fillstatus = data.truck.fillstatus;
        this.detailtruckdataForm.deviceGpsId = data.truck.deviceGpsId;

        this.detaillicensedataForm.id = data.license.id;
        this.detaillicensedataForm.engineNumber = data.license.engineNumber;
        this.detaillicensedataForm.registrationDate = data.license.registrationDate;
        this.detaillicensedataForm.mandatoryScrap = data.license.mandatoryScrap;
        this.detaillicensedataForm.overallQuality = data.license.overallQuality;
        this.detaillicensedataForm.expirationDate = data.license.expirationDate;
        this.detaillicensedataForm.allowableWeight = data.license.allowableWeight;
        this.detaillicensedataForm.validityPeriod = data.license.validityPeriod;
        this.detaillicensedataForm.transportCertificateNumber = data.license.transportCertificateNumber;

        this.detailtripsdataForm.tripsransportLine = data.truck.tripstruckNumber;
        this.detailtripsdataForm.tripsname = data.truck.tripsname;

      })
    },
    deletetruck(id){
      deltruckbyid(id).then(({data}) => {
        if (data && data.code == 0) {
          alert("进来了")
          this.$message({
            message: '删除成功',
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.getDatatruckList()
            }
          })
        }
      })
    },
    gettrucktype(){
      gettrucktypelist().then(({data}) => {
        this.ttypelist = data;
      })
      this.trucktruckVisible=true;
    },
    getfleet(){
      getfleetlist().then(({data}) => {
        this.tfleetlist = data;
      })
      this.truckdriverVisible = true;
    },

    updatetruckbase(){
      document.getElementById("licensePlate").setAttribute("style","background-color:white;");
      document.getElementById("allowableLoad").setAttribute("style","background-color:white;");
      document.getElementById("allowableVolume").setAttribute("style","background-color:white;");
      document.getElementById("status").setAttribute("style","background-color:white;");
      document.getElementById("deviceGpsId").setAttribute("style","background-color:white;");
      document.getElementById("licensePlate").removeAttribute("disabled");
      document.getElementById("allowableLoad").removeAttribute("disabled");
      document.getElementById("allowableVolume").removeAttribute("disabled");
      document.getElementById("status").removeAttribute("disabled");
      document.getElementById("deviceGpsId").removeAttribute("disabled");
      let params = {
        'licensePlate': this.detailtruckdataForm.licensePlate,
        'allowableLoad': this.detailtruckdataForm.allowableLoad,
        'allowableVolume': this.detailtruckdataForm.allowableVolume,
        'status': this.detailtruckdataForm.status,
        'deviceGpsId': this.detailtruckdataForm.deviceGpsId,
      }

    },
    canceltruckbase(){
      document.getElementById("licensePlate").removeAttribute("style");
      document.getElementById("allowableLoad").removeAttribute("style");
      document.getElementById("allowableVolume").removeAttribute("style");
      document.getElementById("status").removeAttribute("style");
      document.getElementById("deviceGpsId").removeAttribute("style");
      document.getElementById("licensePlate").setAttribute("disabled","disabled");
      document.getElementById("allowableLoad").setAttribute("disabled","disabled");
      document.getElementById("allowableVolume").setAttribute("disabled","disabled");
      document.getElementById("status").setAttribute("disabled","disabled");
      document.getElementById("deviceGpsId").setAttribute("disabled","disabled");
    },

    updatelicensebase(){
      document.getElementById("dlid").setAttribute("style","background-color:white;");
      document.getElementById("engineNumber").setAttribute("style","background-color:white;");
      document.getElementById("registrationDate").setAttribute("style","background-color:white;");
      document.getElementById("mandatoryScrap").setAttribute("style","background-color:white;");
      document.getElementById("overallQuality").setAttribute("style","background-color:white;");
      document.getElementById("expirationDate").setAttribute("style","background-color:white;");
      document.getElementById("allowableWeight").setAttribute("style","background-color:white;");
      document.getElementById("validityPeriod").setAttribute("style","background-color:white;");
      document.getElementById("transportCertificateNumber").setAttribute("style","background-color:white;");

      document.getElementById("dlid").removeAttribute("disabled");
      document.getElementById("engineNumber").removeAttribute("disabled");
      document.getElementById("registrationDate").removeAttribute("disabled");
      document.getElementById("mandatoryScrap").removeAttribute("disabled");
      document.getElementById("overallQuality").removeAttribute("disabled");
      document.getElementById("expirationDate").removeAttribute("disabled");
      document.getElementById("allowableWeight").removeAttribute("disabled");
      document.getElementById("validityPeriod").removeAttribute("disabled");
      document.getElementById("transportCertificateNumber").removeAttribute("disabled");
    },
    cancellicensebase(){
      document.getElementById("dlid").removeAttribute("style");
      document.getElementById("engineNumber").removeAttribute("style");
      document.getElementById("registrationDate").removeAttribute("style");
      document.getElementById("mandatoryScrap").removeAttribute("style");
      document.getElementById("overallQuality").removeAttribute("style");
      document.getElementById("expirationDate").removeAttribute("style");
      document.getElementById("allowableWeight").removeAttribute("style");
      document.getElementById("validityPeriod").removeAttribute("style");
      document.getElementById("transportCertificateNumber").removeAttribute("style");

      document.getElementById("dlid").setAttribute("disabled","disabled");
      document.getElementById("engineNumber").setAttribute("disabled","disabled");
      document.getElementById("registrationDate").setAttribute("disabled","disabled");
      document.getElementById("mandatoryScrap").setAttribute("disabled","disabled");
      document.getElementById("overallQuality").setAttribute("disabled","disabled");
      document.getElementById("expirationDate").setAttribute("disabled","disabled");
      document.getElementById("allowableWeight").setAttribute("disabled","disabled");
      document.getElementById("validityPeriod").setAttribute("disabled","disabled");
      document.getElementById("transportCertificateNumber").setAttribute("disabled","disabled");
    }

  }
}

/*

*  */
</script>
